<template>
  <div class="my">
    <div class="header">
      <div class="mydetail">
        <div class="d_top">
          <img src="../../static/avatar.png" alt="" />
          <div>
            <p>{{ myDetail.nickname }}</p>
            <p>{{ myDetail.id }}</p>
          </div>
          <span class="iconfont icon-email-s"></span>
        </div>
        <div class="d_main">
          <dl>
            <dt><i class="iconfont icon-wodefabu"></i></dt>
            <dd>我的发布</dd>
          </dl>
          <dl @click="goCollection">
            <dt><i class="iconfont icon-shoucang"></i></dt>
            <dd>收藏</dd>
          </dl>
          <dl>
            <dt><i class="iconfont icon-liulanlishi"></i></dt>
            <dd>浏览历史</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="item" @click="pay">
        <span>我的订单</span>
        <span>></span>
      </div>
      <div class="item" @click="zw">
        <span>问题反馈</span>
        <span>></span>
      </div>
      <div class="item" @click="contact">
        <span>联系客服</span>
        <span>></span>
      </div>
    </div>

    <!-- /// -->
    <!-- <navigator url="/pages/login/index"> -->
    <div class="footer" @click="exit">
      退出登录
    </div>
    <!-- </navigator> -->
  </div>
</template>

<script>
import { myDetail } from "../../services/index";
import "../../static/font_3cabjnxammg/iconfont.css";
export default {
  data() {
    return {
      myDetail: {},
      currentValue: 1,
    };
  },
  async onShow() {
    let result = await myDetail(wx.getStorageSync("token"));
    this.myDetail = result.body;
  },
  methods: {
    //退出登录
    exit() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    //去收藏
    goCollection() {
      uni.navigateTo({
        url: "/pages/collection/index",
      });
    },
    contact() {
      wx.makePhoneCall({
        phoneNumber: "400 788 7888",
      });
    },
    pay() {
      uni.navigateTo({
        url: "/pages/pay/index",
      });
    },
    zw() {
      return new Promise((resolve, reject) => {
        wx.startSoterAuthentication({
          success(res){
            resolve(res.supporMode)
          },
          fail(err){
            reject(err)
          }
        });
      });
    },
  },
 async created(){
       let supporMode = await this.zw();
  }
};
</script>

<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 330rpx;
    background: linear-gradient(to bottom right, #3bd9e4 0%, #62aef1 100%);
    position: relative;
    .mydetail {
      width: 90%;
      height: 300rpx;
      border-radius: 20rpx;
      background: #fff;
      position: absolute;
      bottom: -80rpx;
      left: 5%;
      box-shadow: 0rpx 6rpx 0rpx #cacaca;
      position: relative;
      .d_top {
        width: 100%;
        height: 150rpx;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ddd;
        img {
          width: 110rpx;
          height: 110rpx;
          border-radius: 50%;
          background: #0262d6;
          margin-left: 20rpx;
        }
        div {
          margin-left: 15rpx;
          p:nth-child(1) {
            font-weight: 900;
          }
        }
        span {
          color: #0262d6;
          position: absolute;
          top: 20rpx;
          left: 60%;
        }
      }
      .d_main {
        width: 100%;
        height: 148rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        dl {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          dd {
            font-weight: 100;
          }
          dt {
            .icon-wodefabu {
              color: #067e18;
              font-size: 70rpx;
            }
            .icon-shoucang {
              color: #e4dd0c;
              font-size: 70rpx;
            }
            .icon-liulanlishi {
              color: #fd1160;
              font-size: 70rpx;
            }
          }
        }
      }
    }
  }
  .main {
    width: 100%;
    margin-top: 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .item {
      width: 100%;
      height: 100rpx;
      border-bottom: 15rpx solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
      span:nth-child(1) {
        margin-left: 20rpx;
      }
      span:nth-child(2) {
        margin-right: 20rpx;
      }
    }
  }
  .footer {
    width: 90%;
    height: 80rpx;
    background: #f13942;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    color: #fff;
    margin: 5% 30rpx 0;
  }
}
</style>
